<template>
    <div class="dashboard-container bodybg">
        <el-row style="height:100%;">
            <el-col :span="6" style="height:100%;">
                <div class="bkmail">
                    <div class="box_con1" v-loading="loading">
                        <div class="title">
                            <span>收入优惠趋势</span>
                        </div>
                        <div class="conform2">
                            <div id="sryhqs" style=" display: block; height:100%"></div>
                        </div>
                    </div>
                    <div class="box_con1">
                        <div class="title">
                            <span>收入分税种优惠趋势</span>
                        </div>
                        <div class="conform2">
                            <div id="srfszyhqs" style=" display: block; height:100%"></div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="12" style="height:100%;">

                <div class="mapContent">
                    <div class="mapTop" style="height:28px;">
                        <el-form size="mini" inline class="myForm" model="form">
                            <el-form-item>
                                <el-date-picker v-model="form.nd" value-format="yyyy" type="year" :default-value="form.defaultDate" placeholder="选择年">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-select v-model="form.qylx" placeholder="请选择">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>

                    <div id="map" style="width:100%;height:100%"></div>
                </div>
            </el-col>
            <el-col :span="6" style="height:100%;">
                <div class="bkmail">
                    <div class="box_con1">
                        <div class="title">
                            <span>增值税留抵退税情况</span>
                        </div>
                        <div class="conform2">
                            <div id="zzsldts" style=" display: block; height:100%"></div>
                        </div>
                    </div>
                    <div class="box_con1">
                        <div class="title">
                            <span>集团企业减税降费排名</span>
                        </div>
                        <div class="conform2">
                            <div id="jtqyjsjf" style=" display: block; height:100%"></div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>

import { queryJsjfgk, jsjfgkSwjgxz } from '@/api/cxtj/jsjfgkjk'
import * as echarts from "echarts";
let china = require('../gkjkfx/json/130000_full.json');
import 'echarts-gl'
export default {
    name: 'Dashboard',

    data() {
        return {
            loading: false,
            options: [
                {
                    value: 1,
                    label: '千户集团'
                },
                {
                    value: 2,
                    label: '列名企业'
                },
                {
                    value: 12,
                    label: '扩围企业'
                }
            ],
            form: {
                defaultDate: '',
                nd: '',
                qylx: '11'
            },
            sryhqsOption: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#fffffff'
                        }
                    },
                    formatter: function (params) {
                        var result = params[0].name + '<br/>';
                        params.forEach(function (item) {
                            if (item.seriesType === 'bar') {
                                result += item.seriesName + ': ' + item.value + '亿元' + '<br/>';
                            } else if (item.seriesType === 'line') {
                                result += item.seriesName + ': ' + item.value + '%' + '<br/>';
                            }
                        });
                        return result;
                    }
                },
                textStyle: {
                    color: '#ffffff' // 文字颜色
                },
                grid: {
                    top: '17%',
                    left: '1%',
                    right: '0%',
                    bottom: '0%',
                    containLabel: true
                },
                legend: {
                    data: ['税收优惠金额', '增长率'],
                    textStyle: {
                        color: '#ffffff' // 文字颜色
                    },
                },
                xAxis: [{
                    type: 'category',
                    data: ['第一季度', '第二季度', '第三季度', '第四季度'],
                    axisPointer: {
                        type: 'shadow',
                    },
                    axisLabel: {
                        fontSize: 12 // 设置标签字体大小
                    }

                }],
                yAxis: [{
                    type: 'value',
                    name: '亿元',
                    min: 0,
                    max: 80,
                    interval: 10,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    nameTextStyle: {
                        align: 'left', // 单位名称的对齐方式
                        padding: [0, 0, 0, -20] // 单位名称的内边距，最后一个值可以调整位置
                    }

                },
                {
                    type: 'value',
                    name: '%',
                    min: -12,
                    max: 12,
                    interval: 3,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#324065', // 设置背景线的颜色
                        }
                    }
                }

                ],
                series: [{

                    name: '税收优惠金额',
                    type: 'bar',
                    barWidth: '30%',
                    itemStyle: {
                        color: {
                            type: 'linear', // 设置渐变类型为径向渐变
                            x: 0,
                            y: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#1379FC' // 渐变起始颜色
                            },
                            {
                                offset: 1,
                                color: '#31C9F8' // 渐变结束颜色
                            },

                            ],
                        },
                        borderRadius: [10, 10, 0, 0],

                    },
                    data: [68, 70, 71, 73]

                },


                {
                    name: '增长率',
                    type: 'line',
                    yAxisIndex: 1,
                    itemStyle: {
                        color: {
                            type: 'linear', // 设置渐变类型为径向渐变
                            x: 0,
                            y: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#44D7B6' // 渐变起始颜色
                            },

                            ],
                        },
                        borderRadius: [10, 10, 0, 0],

                    },
                    tooltip: {
                        valueFormatter: function (value) {
                            return value;
                        }
                    },
                    data: [
                        3.0, 2.9, 3.2, 3.1
                    ]
                }
                ]
            },
            srfszyhqsOption: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#fffffff'
                        }
                    },
                    formatter: function (params) {
                        var result = params[0].name + '<br/>';
                        params.forEach(function (item) {
                            if (item.seriesType === 'bar') {
                                result += item.seriesName + ': ' + item.value + '亿元' + '<br/>';
                            } else if (item.seriesType === 'line') {
                                result += item.seriesName + ': ' + item.value + '%' + '<br/>';
                            }
                        });
                        return result;
                    }
                },
                textStyle: {
                    color: '#ffffff' // 文字颜色
                },
                grid: {
                    top: '17%',
                    left: '1%',
                    right: '0%',
                    bottom: '0%',
                    containLabel: true
                },
                legend: {
                    data: ['税收优惠金额', '增长率'],
                    textStyle: {
                        color: '#ffffff' // 文字颜色
                    },
                },
                xAxis: [{
                    type: 'category',
                    data: ['增值税', '企业所得税'],
                    axisPointer: {
                        type: 'shadow',
                    },
                    axisLabel: {
                        fontSize: 12 // 设置标签字体大小
                    }

                }],
                yAxis: [{
                    type: 'value',
                    name: '亿元',
                    min: 0,
                    max: 80,
                    interval: 10,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    nameTextStyle: {
                        align: 'left', // 单位名称的对齐方式
                        padding: [0, 0, 0, -20] // 单位名称的内边距，最后一个值可以调整位置
                    }

                },
                {
                    type: 'value',
                    name: '%',
                    min: -12,
                    max: 12,
                    interval: 3,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#324065', // 设置背景线的颜色
                        }
                    }
                }

                ],
                series: [{

                    name: '税收优惠金额',
                    type: 'bar',
                    barWidth: '30%',
                    itemStyle: {
                        color: {
                            type: 'linear', // 设置渐变类型为径向渐变
                            x: 0,
                            y: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#1379FC' // 渐变起始颜色
                            },
                            {
                                offset: 1,
                                color: '#31C9F8' // 渐变结束颜色
                            },

                            ],
                        },
                        borderRadius: [10, 10, 0, 0],

                    },
                    data: [68, 70, 71, 73]

                },


                {
                    name: '增长率',
                    type: 'line',
                    yAxisIndex: 1,
                    itemStyle: {
                        color: {
                            type: 'linear', // 设置渐变类型为径向渐变
                            x: 0,
                            y: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#44D7B6' // 渐变起始颜色
                            },

                            ],
                        },
                        borderRadius: [10, 10, 0, 0],

                    },
                    tooltip: {
                        valueFormatter: function (value) {
                            return value;
                        }
                    },
                    data: [
                        3.0, 2.9, 3.2, 3.1
                    ]
                }
                ]
            },
            zzsldtsOption: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#fffffff'
                        }
                    },
                    formatter: function (params) {
                        var result = params[0].name + '<br/>';
                        params.forEach(function (item) {
                            if (item.seriesType === 'bar') {
                                result += item.seriesName + ': ' + item.value + '亿元' + '<br/>';
                            } else if (item.seriesType === 'line') {
                                result += item.seriesName + ': ' + item.value + '%' + '<br/>';
                            }
                        });
                        return result;
                    }
                },
                textStyle: {
                    color: '#ffffff' // 文字颜色
                },
                grid: {
                    top: '17%',
                    left: '1%',
                    right: '0%',
                    bottom: '0%',
                    containLabel: true
                },
                legend: {
                    data: ['税收优惠金额', '增长率'],
                    textStyle: {
                        color: '#ffffff' // 文字颜色
                    },
                },
                xAxis: [{
                    type: 'category',
                    data: ['第一季度', '第二季度', '第三季度', '第四季度'],
                    axisPointer: {
                        type: 'shadow',
                    },
                    axisLabel: {
                        fontSize: 12 // 设置标签字体大小
                    }

                }],
                yAxis: [{
                    type: 'value',
                    name: '亿元',
                    min: 0,
                    max: 80,
                    interval: 10,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    nameTextStyle: {
                        align: 'left', // 单位名称的对齐方式
                        padding: [0, 0, 0, -20] // 单位名称的内边距，最后一个值可以调整位置
                    }

                },
                {
                    type: 'value',
                    name: '%',
                    min: -12,
                    max: 12,
                    interval: 3,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#324065', // 设置背景线的颜色
                        }
                    }
                }

                ],
                series: [{

                    name: '税收优惠金额',
                    type: 'bar',
                    barWidth: '30%',
                    itemStyle: {
                        color: {
                            type: 'linear', // 设置渐变类型为径向渐变
                            x: 0,
                            y: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#1379FC' // 渐变起始颜色
                            },
                            {
                                offset: 1,
                                color: '#31C9F8' // 渐变结束颜色
                            },

                            ],
                        },
                        borderRadius: [10, 10, 0, 0],

                    },
                    data: [68, 70, 71, 73]

                },


                {
                    name: '增长率',
                    type: 'line',
                    yAxisIndex: 1,
                    itemStyle: {
                        color: {
                            type: 'linear', // 设置渐变类型为径向渐变
                            x: 0,
                            y: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#44D7B6' // 渐变起始颜色
                            },

                            ],
                        },
                        borderRadius: [10, 10, 0, 0],

                    },
                    tooltip: {
                        valueFormatter: function (value) {
                            return value;
                        }
                    },
                    data: [
                        3.0, 2.9, 3.2, 3.1
                    ]
                }
                ]
            },
            jtqyjsjfOption: {
                backgroundColor: '',
                // title: {
                //     text: '集团企业减税降费排名',
                //     left: '2%',
                //     top: '4%',
                //     textStyle: {
                //         fontSize: 20,
                //         color: '#fff',
                //         fontStyle: 'normal',
                //         fontWeight: 'normal',
                //     }
                // },
                grid: {
                    top: '5%',
                    left: '19%',
                    bottom: '12%'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params, ticket, callback) {
                        var value = params[0].name;
                        var index = value.indexOf('####');

                        var ret = '';
                        if (index <= 0) {
                            ret = value;
                        } else {
                            ret = value.substr(index + 4)
                        }
                        ret += "<br>" + params[0].seriesName + ":" + params[0].value
                        return ret;
                    }
                },
                calculable: true,
                xAxis: [{
                    type: 'value',
                    name: '万元',
                    //interval: 'auto',
                    nameTextStyle: {
                        color: '#fff'
                    },
                    splitLine: {
                        show: true
                    },
                    spiltNumber: 3,
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontSize: 14
                        },
                        rotate: 20
                    },

                }],
                yAxis: [{
                    type: 'category',
                    data: ['----####----', '----####----', '----####----', '----####----', '----####----'],
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontSize: 14
                        },
                        formatter: function (value) {
                            var index = value.indexOf('####');
                            if (index <= 0) {
                                return value;
                            } else {
                                return value.substr(0, index)
                            }
                        }
                    },

                }],
                series: [{
                    name: '收入（万元）',
                    type: 'bar',
                    barWidth: 20,
                    itemStyle: {
                        color: "#1e90ff"
                    },
                    data: [100, 22, 666, 888, 999]
                }]
            },
            mapXzData: [],
            mapNsrmc: '',
            maploading: false
        }
    },

    mounted() {

        var currentDate = new Date();
        // var year = currentDate.getFullYear(); // 获取当前年份
        this.form.defaultDate = currentDate.getFullYear();
        this.form.nd = currentDate.getFullYear();
        this.getData()
    },
    methods: {


        getData() {
            this.loading = true
            let param = {
                nd: this.form.nd,
                jtlx: this.form.jtlx,
            }
            queryJsjfgk(param).then(res => {
                this.loading = false
                if (res.code == 200) {
                    console.log(res)
                    // //集团概况
                    // this.bqjtsrData = res.data.bqjtsr
                    // this.jtqysrqs = res.data.jtqysrqs
                    // this.jtsrpmData = res.data.jtsrpmZbzj.sort((a, b) => a.JTSR - b.JTSR)
                    // this.jtsrpmZbzj = res.data.jtsrpmZbzj
                    // // arr.sort((a, b) => b.JTSR - a.JTSR)
                    // this.jtsrpmZbbzj = res.data.jtsrpmZbbzj


                    // this.jths = res.data.jths
                    // this.jtSfl = res.data.jtSfl
                    // this.jtsrjjlxgcData = res.data.jtsrjjlxgc
                    // this.qssrData = res.data.jtgkdt.sort((a, b) => a.SE - b.SE)
                    this.init()
                }
            })
        },
        init() {
            this.sryhqsEchar()
            this.srfszyhqsEchar()
            this.zzsldtsEchar()
            this.jtqyjsjfEchar()
            this.mapChart()
        },
        sryhqsEchar() {
            let myChart = echarts.init(document.getElementById('sryhqs'));

            myChart.setOption(
                this.sryhqsOption
            );

            window.addEventListener("resize", () => {
                myChart.resize();
            });
        },
        srfszyhqsEchar() {
            let myChart = echarts.init(document.getElementById('srfszyhqs'));

            myChart.setOption(
                this.srfszyhqsOption
            );

            window.addEventListener("resize", () => {
                myChart.resize();
            });
        },
        zzsldtsEchar() {
            let myChart = echarts.init(document.getElementById('zzsldts'));

            myChart.setOption(
                this.zzsldtsOption
            );

            window.addEventListener("resize", () => {
                myChart.resize();
            });
        },
        jtqyjsjfEchar() {
            let myChart = echarts.init(document.getElementById('jtqyjsjf'));

            myChart.setOption(
                this.jtqyjsjfOption
            );

            window.addEventListener("resize", () => {
                myChart.resize();
            });
        },
        mapChart() {
            echarts.registerMap('china', china);
            var chart = echarts.init(document.getElementById('map'));
            var data = [{
                name: '唐山市',
                value: 10
            },
            {
                name: '张家口市',
                value: 20
            },
                // ... 其他省份
            ];
            chart.setOption({
                series: [{
                    type: 'map3D',
                    map: 'china',
                    top: '3%', // 顶部的空间大小
                    bottom: '15%', // 底部的空间大小
                    left: '30px', // 左侧的空间大小
                    right: '10%', // 右侧的空间大小
                    itemStyle: {
                        color: 'rgba(21, 46, 171, 0.5)',
                        opacity: 1, // 图形的不透明度 [ default: 1 ]
                        borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
                        borderColor: "#9AB4FF", // 图形描边的颜色。[ default: #333 ]
                    },

                    label: {
                        // 标签的相关设置
                        show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
                        // formatter: function (params) {
                        //   return params.name ? params.name : " ";
                        // },
                        position: "bottom",
                        textStyle: {
                            // 标签的字体样式
                            color: "#fff", // 地图初始化区域字体颜色
                            fontSize: 12, // 字体大小
                            opacity: 1,
                        },
                    },

                    /*
                    emphasis: {
                      // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式)
                      label: {
                        // label 高亮时的配置
                        show: true,
                        textStyle: {
                          color: "#fff", // 高亮时标签颜色变为 白色
                          fontSize: 15, // 高亮时标签字体 变大
                        },
                      },
                      itemStyle: {
                        // itemStyle 高亮时的配置
                        areaColor: "#66ffff", // 高亮时地图板块颜色改变
                      },
                    },
                    */
                    groundPlane: {
                        // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
                        show: false, // 是否显示地面。[ default: false ]
                        color: "#aaa", // 地面颜色。[ default: '#aaa' ]
                    },
                    light: {
                        // 光照相关的设置。在 shading 为 'color' 的时候无效。  光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
                        main: {
                            // 场景主光源的设置，在 globe 组件中就是太阳光。
                            color: "#3D94CE", // 主光源的颜色。[ default: #fff ]
                            intensity: 2, // 主光源的强度。[ default: 1 ]
                            shadow: false, // 主光源是否投射阴影。默认关闭。    开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
                            shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
                            alpha: 30, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
                            beta: 80, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
                        },
                        ambient: {
                            // 全局的环境光设置。
                            color: "#fff", // 环境光的颜色。[ default: #fff ]
                            intensity: 0.5, // 环境光的强度。[ default: 0.2 ]
                        },
                    },

                    viewControl: {
                        // 用于鼠标的旋转，缩放等视角控制。
                        projection: "perspective", // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
                        autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
                        autoRotateDirection: "cw", // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
                        autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
                        autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
                        damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
                        rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。	rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
                        zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
                        panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
                        panMouseButton: "left", // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                        rotateMouseButton: "left", // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                        distance: 160, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
                        minDistance: 30, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
                        maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
                        alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
                        beta: -3, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
                        minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                        maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                        minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                        maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
                        center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
                        animation: true, // 是否开启动画。[ default: true ]
                        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                        animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
                    },
                }]
            });
            chart.on("click", (e) => {
                console.log(e)
                self.mapXzData = []
                if (self.qssrData.length > 0) {
                    let swjgdm = ''
                    for (let i = 0; i < self.qssrData.length; i++) {
                        if (e.data.name == self.qssrData[i].SWJGMC) {
                            swjgdm = self.qssrData[i].SWJGDM
                        }
                    }
                    let param = {
                        swjgDm: swjgdm,
                        nd: self.form.nd,
                        jtlx: self.form.jtlx,
                    }
                    self.maploading = true
                    self.mapNsrmc = e.data.name
                    jsjfgkSwjgxz(param).then(res => {
                        self.maploading = false
                        if (res.code == 200) {
                            console.log(res)
                            self.mapXzData = res.data
                        }
                    })

                    console.log(swjgdm)
                    let dialog = document.getElementById('map-dialog')
                    dialog.style.display = 'flex'
                })

            window.addEventListener("resize", () => {
                chart.resize();
            });
        },
    }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/styles/css/gkfx.css';
.dashboard-container {
    height: 100%;
    width: 100%;

    .btn {
        padding: 8px 8px 8px 0;
    }
}
.fileView {
    width: 100%;
    height: 75vh;
    // overflow: hidden;
}
.addContent {
    width: 100%;
    height: 300px;
    padding: 20px;
}
.mapContent {
    position: relative;
    height: 100%;
    width: 100%;
    .mapTop {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 9999999;
        .myForm {
            height: 28px;
        }
    }
}
::v-deep {
    .el-date-picker,
    .el-input {
        width: 150px;
        background: transparent;
        color: #fff;
    }
}
</style>
